<extend name="Base/common"/>
<block name="head_css">
<link href="__PUBLIC__/Green/css/usercenter.css" rel='stylesheet' type='text/css' />
</block>
<block name="head_script">
<script type="text/javascript" src="__PUBLIC__/Green/js/usercenter.js"></script>
</block>
<block name="body">
    <div class="width1000">
         <div class="top_tit">
            <a href="{:U('User/index')}">用户中心</a> &gt;&gt; <a href="{:U('User/exchange')}">车币兑换</a> &gt;&gt; 兑换商城
        </div> 
        <div class="clearfix relative">
            <include file="User/nav" />
            <div class="user_center">
                <div class="user_exchange">
                    <div class="withdraw_top">
                        兑换商城
                    </div>
                    <ul class="exchange_ul clearfix">
                    <volist name="goods" id="item">
                        <li class="exchange_li">
                            <div class="exchange_li_img">
                                <img src="{$item.cover_id|get_cover='path'}"/>
                            </div>
                            <div class="exchange_bottom">
                                <div class="exchange_bottom_left">
                                    <p>{$item.title}</p>
                                    <p>1车币=1RMB</p>
                                    <input type="hidden" value="{$item.id}" class="exchange_id"/>
                                    <input type="hidden" value="{$item.ptype}" class="exchange_type"/>
                                    <input type="hidden" value="{$item.price}" class="exchange_value"/>
                                </div>
                                <a href="javascript:void(0);" class="echange_bottom_right">
                                    兑换
                                </a>
                            </div>
                        </li>
                    </volist>
                    </ul>
                    <div class="onethink pagination pagination-right pagination-large">
                        <article:page cate="$category['id']" listrow="$category['list_row']" />
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="pop_content">
        <div class="new_address pop_exchange">
            <form action="{:U('User/buy')}" method="post" id="forms">
                <span class="pop_close"></span>
                <div class="clearfix pop_form_div">
                    <div class="span3 f_l t_r pop_input_left">
                        <span id="extdata_title">手机号码</span>：
                    </div>
                    <div class="span7 f_l">
                        <input type="text" class="pop_input" name="extdata" />
                    </div>
                </div>
                <div class="clearfix pop_form_div">
                    <div class="span3 f_l t_r pop_input_left">
                        数量：
                    </div>
                    <div class="span7 f_l has_small_btn">
                        <span class="pop_num_btn" id="minus_num">-</span>
                        <input type="text" class="pop_input pop_input2" value="1" name="num" id="pop_buy_num"/>
                        <span class="pop_num_btn" id="add_num">+</span>
                    </div>
                </div>
                <div class="clearfix pop_form_div">
                    <div class="span3 f_l t_r pop_input_left">
                        金额：
                    </div>
                    <div class="span7 f_l">
                        <input type="hidden" name="price" value="" id="price" />
                        <span class="pop_num_money" id="pop_num_money"></span>
                    </div>
                </div>
                <div class="clearfix pop_form_div">
                    <div class="span3 f_l t_r pop_input_left">
                        支付密码：
                    </div>
                    <div class="span7 f_l">
                        <input type="password" name="cashpass" id="cashpass" class="pop_input"/>
                    </div>
                </div>
                <input type="hidden" name="goods_id" id="goods_id" value="" />
                <input type="submit" value="提交" class="add_submit"/>
            </form>
        </div>
    </div>
    
</block>    
<block name="script">
<script type="text/javascript" src="__PUBLIC__/Green/js/insurance.js"></script>
<script type="text/javascript">
    highlight_nav("{:U('User/exchange')}");
    
$(function() {
    // 兑换页面
    $(".pop_close").on("click",function(){
        $(".pop_content").hide();
    });
    $("#minus_num").on("click", function() {
        var nums = $("#pop_buy_num").val(),price=$('#price').val();
        if (nums >= 2) {
            nums --;
            $("#pop_buy_num").val(nums);
            $("#pop_num_money").html(price*nums);
        }
    });
    $("#add_num").on("click", function() {
        var nums = $("#pop_buy_num").val(),price=$('#price').val();
        nums++;
        $("#pop_buy_num").val(nums);
        $("#pop_num_money").html(price*nums);
    });
    $(".echange_bottom_right").on("click", function() {
        var price = $(this).parent().find(".exchange_value").val(),
            id = $(this).parent().find('.exchange_id').val(),
            type = $(this).parent().find('.exchange_type').val();
        $('#forms')[0].reset();
        $("#pop_buy_num").val(1);
        $('#price').val(price);
        $('#goods_id').val(id);
        $(".pop_content").fadeIn(300);
        $("#pop_num_money").html(price);
    });
       
    $('#forms').validate({
        rules:{
            extdata:{
                required:true
            },
            cashpass:{
                required:true
            }
        },
        messages:{
            extdata:{
                required:'请填写'+$('#extdata_title').text()
            },
            cashpass:{
                required:'请填写支付密码'
            }
        },
        submitHandler:function(form){
            var self = $(form);
            $.post(self.attr("action"), self.serialize(), function(data){
                if(data.status){
                    $(form)[0].reset();
                    $(".pop_content").hide();
                    alert('兑换成功！');
                } else {
                    alert(data.info);
                }
            }, "json");
        }
    });
});    
</script>
</block>
